<template>
  <div class="progress-ring" :style="{ width: width + 'px', height: height + 'px' }">
    <div class="ring-header">
      <h3 class="ring-title">{{ title }}</h3>
    </div>
    <div class="ring-content">
      <svg :width="chartSize" :height="chartSize" class="ring-svg">
        <!-- 背景圆环 -->
        <circle 
          :cx="centerX" 
          :cy="centerY" 
          :r="radius" 
          fill="none" 
          stroke="#f0f0f0" 
          :stroke-width="strokeWidth"
          class="background-ring"
        />
        
        <!-- 进度圆环 -->
        <circle 
          :cx="centerX" 
          :cy="centerY" 
          :r="radius" 
          fill="none" 
          :stroke="color" 
          :stroke-width="strokeWidth"
          stroke-linecap="round"
          :stroke-dasharray="circumference"
          :stroke-dashoffset="dashOffset"
          :transform="`rotate(-90 ${centerX} ${centerY})`"
          class="progress-ring"
        />
        
        <!-- 中心文本 -->
        <text 
          :x="centerX" 
          :y="centerY - 5" 
          text-anchor="middle" 
          dominant-baseline="middle"
          class="percentage-text"
        >
          {{ percentage }}%
        </text>
        
        <text 
          :x="centerX" 
          :y="centerY + 15" 
          text-anchor="middle" 
          dominant-baseline="middle"
          class="label-text"
        >
          完成
        </text>
      </svg>
      
      <!-- 进度信息 -->
      <div class="progress-info">
        <div class="info-item">
          <span class="info-label">目标:</span>
          <span class="info-value">100%</span>
        </div>
        <div class="info-item">
          <span class="info-label">剩余:</span>
          <span class="info-value">{{ 100 - percentage }}%</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  width?: number
  height?: number
  title?: string
  percentage?: number
  strokeWidth?: number
  color?: string
}

const props = withDefaults(defineProps<Props>(), {
  width: 200,
  height: 200,
  title: '进度环',
  percentage: 75,
  strokeWidth: 6,
  color: '#409EFF'
})

// 计算属性
const chartSize = computed(() => Math.max(100, Math.min(props.width, props.height) - 40))
const centerX = computed(() => chartSize.value / 2)
const centerY = computed(() => chartSize.value / 2)
const radius = computed(() => Math.max(10, (chartSize.value / 2) - props.strokeWidth - 10))

const circumference = computed(() => 2 * Math.PI * radius.value)
const dashOffset = computed(() => {
  const progress = Math.min(100, Math.max(0, props.percentage)) / 100
  return circumference.value * (1 - progress)
})
</script>

<style lang="scss" scoped>
.progress-ring {
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  
  .ring-header {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    background: #fafafa;
    
    .ring-title {
      margin: 0;
      font-size: 14px;
      font-weight: 500;
      color: #303133;
    }
  }
  
  .ring-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .ring-svg {
      .background-ring {
        opacity: 0.3;
      }
      
      .progress-ring {
        transition: stroke-dashoffset 0.5s ease;
      }
      
      .percentage-text {
        font-size: 20px;
        font-weight: bold;
        fill: #303133;
      }
      
      .label-text {
        font-size: 12px;
        fill: #909399;
      }
    }
    
    .progress-info {
      margin-top: 16px;
      display: flex;
      gap: 20px;
      
      .info-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        
        .info-label {
          font-size: 11px;
          color: #909399;
          margin-bottom: 4px;
        }
        
        .info-value {
          font-size: 14px;
          font-weight: 500;
          color: #303133;
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .progress-ring {
    .ring-content {
      .progress-info {
        gap: 16px;
        
        .info-item {
          .info-value {
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style> 
 